<template>
    <view class="mine-container" :style="{height: `${windowHeight}px`}">
        <!--顶部个人信息栏-->
        <view class="header-section">
            <view style="display: flex;align-items: center;justify-content: flex-end">
                <image style="width: 72upx;height: 72upx;margin-right: 20upx" src="@/static/images/setting.png" @click="handleToSetting"></image>
                <image style="width: 72upx;height: 72upx;margin-right: 20upx" src="@/static/images/info.png"></image>
            </view>
            <view class="flex padding justify-between">
                <view class="flex align-center">
                    <view v-if="!avatar" class="cu-avatar xl round bg-white">
                        <image src="@/static/images/active-image.png" style="width: 112upx;height: 112upx"></image>
                    </view>
                    <image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round"
                           mode="widthFix">
                    </image>
                    <view style="margin-left: 32upx">
                        <view style="margin-bottom: 12upx;font-weight: 800;font-size: 32upx;color: #FFFFFF;"
                              class="font-style-normal">{{name}}
                        </view>
                        <view style="display: flex;align-items: center">
                            <veiw class="tag-content">超会买</veiw>
                            <veiw class="tag-content">爱护肌肤</veiw>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="content-section">
            <view class="mine-actions col-4 text-center"
                  style="display: flex;align-items: center;justify-content: space-between">
                <view class="show-bg-action">
                    <view class="title">收藏</view>
                    <view class="desp">收藏好物与店铺</view>
                    <image src="@/static/images/wujiaoxing.png" style="align-self: flex-end;width: 60upx;height: 72upx"
                           mode="scaleToFill"></image>
                </view>
                <view class="show-bg-action">
                    <view class="title">足迹</view>
                    <view class="desp">我的变美日记</view>
                    <image src="@/static/images/shizhong.png" style="align-self: flex-end;width: 60upx;height: 76upx"
                           mode="scaleToFill"></image>
                </view>
                <view class="show-bg-action">
                    <view class="title">优惠劵</view>
                    <view class="desp">使用您的优惠劵</view>
                    <image src="@/static/images/youhui.png" style="align-self: flex-end;width: 60upx;height: 76upx"
                           mode="scaleToFill"></image>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            name: this.$store.state.user.name
        }
    },
    created() {
        console.log(this.$store.state.user.name,'this.$store.state.user.name')
    },
    computed: {
        avatar() {
            return this.$store.state.user.avatar
        },
        windowHeight() {
            return uni.getSystemInfoSync().windowHeight - 50
        }
    },
    methods: {
        handleToInfo() {
            this.$tab.navigateTo('/pages/mine/info/index')
        },
        handleToEditInfo() {
            this.$tab.navigateTo('/pages/mine/info/edit')
        },
        handleToSetting() {
            this.$tab.navigateTo('/pages/mine/setting/index')
        },
        handleToLogin() {
            this.$tab.reLaunch('/pages/login')
        },
        handleToAvatar() {
            this.$tab.navigateTo('/pages/mine/avatar/index')
        },
        handleHelp() {
            this.$tab.navigateTo('/pages/mine/help/index')
        },
        handleAbout() {
            this.$tab.navigateTo('/pages/mine/about/index')
        },
        handleJiaoLiuQun() {
            this.$modal.showToast('QQ群：①133713780(满)、②146013835(满)、③189091635')
        },
        handleBuilding() {
            this.$modal.showToast('模块建设中~')
        }
    }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #F5F5F5;
}

.mine-container {
  width: 100%;
  height: 100%;


  .header-section {
    padding: 30upx 32upx 90upx 32upx;
    background-color: #4376FC;
    color: white;

    .login-tip {
      font-size: 36upx;
      margin-left: 20upx;
    }

    .cu-avatar {
      border: 2upx solid #eaeaea;

      .icon {
        font-size: 80upx;
      }
    }
  }

  .content-section {
    position: relative;
    top: -100upx;

    .mine-actions {
      height: 190upx;
      margin: 84upx 0 30upx 0;
      padding: 40upx 32upx;
      border-top-left-radius: 32upx;
      border-top-right-radius: 32upx;
      background-color: white;
      box-sizing: border-box;

      .show-bg-action {
        width: 214upx;
        height: 150upx;
        background: #4376FC;
        border-radius: 20upx;
        padding: 12upx 20upx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        .title {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28upx;
          color: #FFFFFF;
        }

        .desp {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24upx;
          color: #FFFFFF;
          opacity: 0.7;
        }
      }
    }
  }

  .tag-content {
    background: url("@/static/images/tag-bg.png") no-repeat;
    background-size: 100% 100%;
    height: 34upx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 22upx;
    color: #FFFFFF;
    padding: 10upx;
    box-sizing: border-box;

    &:not(:last-child) {
      margin-right: 12upx;
    }
  }
}
</style>
